request notifications

3 files changed, 32 insertions, 25 deletions

diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index a1d156e5..3ad76184 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -1,14 +1,14 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from '@sveltejs/kit';
 import { auth, post } from '$lib/utils';
 
 export let load = ({ params }) => {
-  let { username } = params;
-} 
+	let { username } = params;
+};
 
 export const actions = {
 	default: async ({ cookies, request, url }) => {
 		let form = Object.fromEntries(await request.formData());
 		await post('/requests', form, auth(cookies));
-    throw redirect(307, url.href + '/sent');
+		throw redirect(307, url.href + '/sent');
 	}
 };
diff --git a/src/routes/(app)/[username]/request/+page.svelte b/src/routes/(app)/[username]/request/+page.svelte
index 32b03eaa..37fdae96 100644
--- a/src/routes/(app)/[username]/request/+page.svelte
+++ b/src/routes/(app)/[username]/request/+page.svelte
@@ -3,27 +3,36 @@
 	import { Icon } from '$comp';
 	import { back } from '$lib/utils';
 
-  export let data;
-  export let form;
+	export let data;
+	export let form;
 
-  let { subject, user } = data;
+	let { subject, user } = data;
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-8">Request an invoice</h1>
+<div class="container max-w-lg px-4 mx-auto">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Request an invoice</h1>
 
-<div class="container max-w-lg px-4 flex mx-auto">
-  <form method="POST" use:enhance>
-    <input type="hidden" name="requester_id" value={user.id} />
-    <input type="hidden" name="recipient" value={subject.username} />
+	<form method="POST" use:enhance class="space-y-5">
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
 
-		<textarea name="memo" placeholder="(Optional) message. You might use this field to identify yourself or your order" class="w-full p-4 border rounded-xl h-48" />
+		<textarea
+			name="memo"
+			placeholder="(Optionally) use this field to describe your order"
+			class="w-full p-4 border rounded-xl h-48"
+		/>
 
-		<button type="submit" class="bg-black text-white border rounded-full px-6 py-2 font-bold">
-		Go	
-		</button>
+		<div class="w-full flex">
+			<button
+				type="submit"
+				class="bg-black text-white border rounded-full px-6 py-2 font-bold mx-auto"
+			>
+				Submit Request
+			</button>
+		</div>
 	</form>
 </div>
diff --git a/src/routes/(app)/[username]/request/sent/+page.svelte b/src/routes/(app)/[username]/request/sent/+page.svelte
index 47d930bf..1ee2cde1 100644
--- a/src/routes/(app)/[username]/request/sent/+page.svelte
+++ b/src/routes/(app)/[username]/request/sent/+page.svelte
@@ -2,8 +2,8 @@
 	import { scale } from 'svelte/transition';
 	import { Icon } from '$comp';
 
-  export let data;
-  let { subject } = data;
+	export let data;
+	let { subject } = data;
 </script>
 
 <div class="container px-4 text-center mx-auto">
@@ -12,11 +12,9 @@
 	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">Request sent</h1>
 
-  <a href={`/${subject.username}`}>
-	<button
-		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-	>
-		Done
-	</button>
-    </a>
+	<a href={`/${subject.username}`}>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
+			Done
+		</button>
+	</a>
 </div>